<template>
  <div>
    <div class="tab" v-for="item in list" :key="item.index">
      <div>
        <ul>
          <li>品牌</li>
          <li >
            <router-link tag="a" to="/mark">{{item.brand}}</router-link>
            <router-link tag="a" to="/only">{{item.brand}}</router-link>
            <router-link tag="a" to="/vero">{{item.brand}}</router-link>
            <router-link tag="a" to="/feir">{{item.brand}}</router-link>
          </li>
        </ul>
      </div>
      <div>
        <ul>
          <li>品类</li>
          <li>
            <a href="#">{{item.prodName}}</a>
          </li>
        </ul>
      </div>
      <div>
        <ul>
          <li>尺码</li>
          <li>
            <a href="#">{{item.size}}</a>
            <!-- <a href="#">XXS</a>
            <a href="#">XS</a>
            <a href="#">S</a>
            <a href="#">M</a>
            <a href="#">L</a>
            <a href="#">XL</a>
            <a href="#">2XL</a> -->
          </li>
        </ul>
      </div>
      <div>
        <ul>
          <li>袖长</li>
          <li>
            <a href="#">短袖</a>
            <a href="#">长袖</a>
            <a href="#">五分袖</a>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import url from "@/config/url";

export default {
  data() {
    return {
      list: [],
    }
  },
  created (){
       this.$http.get(url.projectList).then((res) => {
            // console.log(res);
            this.list = res;
        });
    }
};
</script>

<style lang="scss" scoped>
.tab {
  font-size: 12px;
  border: 1px solid #e7e7e7;
  margin-bottom: 10px;
  margin-top: 10px;
  > div {
    border-bottom: solid 1px #e7e7e7;
    height: 40px;
    ul {
      li {
        list-style: none;
        float: left;
        margin: 10px 50px 10px 5px;
        color: #666;
        font-weight: 400;
        a {
          text-decoration: none;
          color: #333;
          margin-right: 40px;
        }
        :hover {
          color: #ff38c0;
        }
      }
    }
  }
}
</style>